<template>
  <ErpLayout>
  <div class="modern-page icon-gallery-container">
    <div class="gallery-header modern-card__header">
      <h1 class="modern-text-gradient">🎨 TDesign 图标库</h1>
      <p>完整的 TDesign Vue Next 图标集合，按分类整理</p>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section modern-card modern-glass">
      <div class="search-controls">
        <t-input
          v-model="searchText"
          placeholder="搜索图标名称或中文..."
          clearable
          size="large"
          class="search-input modern-input"
        >
          <template #prefix-icon>
            <SearchIcon />
          </template>
        </t-input>
        
        <t-select
          v-model="selectedCategory"
          placeholder="选择分类"
          clearable
          size="large"
          class="category-select modern-select"
        >
          <t-option value="" label="全部分类" />
          <t-option
            v-for="category in categories"
            :key="category.key"
            :value="category.key"
            :label="category.name"
          />
        </t-select>
      </div>
      
      <div class="search-stats modern-glass-light modern-rounded-md">
        共找到 <span class="stats-number modern-text-gradient">{{ filteredIcons.length }}</span> 个图标
      </div>
    </div>

    <!-- 图标分类展示 -->
    <div class="categories-container">
      <div
        v-for="category in displayCategories"
        :key="category.key"
        class="category-section modern-card modern-slide-in"
      >
        <div class="category-header">
          <h2>{{ category.icon }} {{ category.name }}</h2>
          <span class="category-count">{{ category.icons.length }} 个图标</span>
        </div>
        
        <div class="icons-grid">
          <div
            v-for="icon in category.icons"
            :key="icon.name"
            class="icon-item"
            @click="copyIconCode(icon)"
          >
            <div class="icon-display">
              <component :is="icon.name" :size="24" />
            </div>
            <div class="icon-info">
              <div class="icon-name">{{ icon.name }}</div>
              <div class="icon-desc">{{ icon.desc }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 使用说明 -->
    <div class="usage-guide">
      <h2>📚 使用指南</h2>
      <div class="guide-content">
        <div class="guide-section">
          <h3>基础用法</h3>
          <pre><code>&lt;template&gt;
  &lt;UserIcon /&gt;
  &lt;UserIcon size="24" /&gt;
  &lt;UserIcon color="#0052d9" /&gt;
&lt;/template&gt;</code></pre>
        </div>

        <div class="guide-section">
          <h3>在组件中使用</h3>
          <pre><code>&lt;t-button&gt;
  &lt;template #icon&gt;
    &lt;AddIcon /&gt;
  &lt;/template&gt;
  新增
&lt;/t-button&gt;</code></pre>
        </div>

        <div class="guide-section">
          <h3>动态使用</h3>
          <pre><code>&lt;component :is="iconName" size="24" /&gt;</code></pre>
        </div>
      </div>
    </div>
  </div>
  </ErpLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import ErpLayout from '@/layouts/ErpLayout.vue'

// 搜索和筛选状态
const searchText = ref('')
const selectedCategory = ref('')

// 图标分类定义
const categories = [
  {
    key: 'brand',
    name: '品牌',
    icon: '🏢',
    icons: [
      { name: 'LogoAdobeIllustrateIcon', desc: 'Adobe Illustrate' },
      { name: 'LogoAdobeLightroomIcon', desc: 'Adobe Lightroom' },
      { name: 'LogoAdobePhotoshopIcon', desc: 'Adobe Photoshop' },
      { name: 'LogoAlipayIcon', desc: '支付宝' },
      { name: 'LogoAndroidIcon', desc: '安卓' },
      { name: 'LogoAppleIcon', desc: '苹果' },
      { name: 'LogoBehanceIcon', desc: 'Behance' },
      { name: 'LogoChromeIcon', desc: '谷歌浏览器' },
      { name: 'LogoCinema4DIcon', desc: 'Cinema 4D' },
      { name: 'LogoCnbIcon', desc: 'CNB' },
      { name: 'LogoCodepenIcon', desc: 'Codepen' },
      { name: 'LogoCodesandboxIcon', desc: 'CodeSandbox' },
      { name: 'LogoDribbbleIcon', desc: 'Dribbble' },
      { name: 'LogoFacebookIcon', desc: '脸书' },
      { name: 'LogoFigmaIcon', desc: 'Figma' },
      { name: 'LogoFramerIcon', desc: 'Framer' },
      { name: 'LogoGithubIcon', desc: 'GitHub' },
      { name: 'LogoGitlabIcon', desc: 'GitLab' },
      { name: 'LogoIeIcon', desc: 'IE浏览器' },
      { name: 'LogoInstagramIcon', desc: 'Instagram' },
      { name: 'LogoMiniprogramIcon', desc: '小程序' },
      { name: 'LogoQqIcon', desc: 'QQ' },
      { name: 'LogoTwitterIcon', desc: '推特' },
      { name: 'LogoWechatIcon', desc: '微信' },
      { name: 'LogoWechatStrokeIcon', desc: '微信描边' },
      { name: 'LogoWecomIcon', desc: '企业微信' },
      { name: 'LogoYoutubeIcon', desc: 'YouTube' },
    ]
  },
  {
    key: 'chart',
    name: '图表',
    icon: '📊',
    icons: [
      { name: 'ChartIcon', desc: '图表' },
      { name: 'Chart1Icon', desc: '图表1' },
      { name: 'ChartAreaIcon', desc: '面积图' },
      { name: 'ChartBarIcon', desc: '柱状图' },
      { name: 'ChartBubbleIcon', desc: '气泡图' },
      { name: 'ChartColumnIcon', desc: '柱形图' },
      { name: 'ChartLineIcon', desc: '折线图' },
      { name: 'ChartMaximumIcon', desc: '图表最大化' },
      { name: 'ChartPieIcon', desc: '饼图' },
      { name: 'ChartRadarIcon', desc: '雷达图' },
      { name: 'ChartRingIcon', desc: '环形图' },
      { name: 'ChartScatterIcon', desc: '散点图' },
      { name: 'AnalyticsIcon', desc: '分析' },
      { name: 'TrendingUpIcon', desc: '上升趋势' },
      { name: 'TrendingDownIcon', desc: '下降趋势' },
    ]
  },
  {
    key: 'system',
    name: '系统',
    icon: '⚙️',
    icons: [
      { name: 'SettingIcon', desc: '设置' },
      { name: 'Setting1Icon', desc: '设置1' },
      { name: 'ToolsIcon', desc: '工具' },
      { name: 'Tool1Icon', desc: '工具1' },
      { name: 'CodeIcon', desc: '代码' },
      { name: 'Code1Icon', desc: '代码1' },
      { name: 'BugIcon', desc: '错误调试' },
      { name: 'Bug1Icon', desc: '错误调试1' },
      { name: 'DatabaseIcon', desc: '数据库' },
      { name: 'Database1Icon', desc: '数据库1' },
      { name: 'ServerIcon', desc: '服务器' },
      { name: 'TerminalIcon', desc: '终端' },
      { name: 'ConsoleIcon', desc: '控制台' },
      { name: 'ApiIcon', desc: 'API接口' },
      { name: 'PluginIcon', desc: '插件' },
      { name: 'ComponentIcon', desc: '组件' },
      { name: 'ModuleIcon', desc: '模块' },
      { name: 'SystemIcon', desc: '系统' },
      { name: 'System1Icon', desc: '系统1' },
    ]
  },
  {
    key: 'action',
    name: '操作',
    icon: '🔧',
    icons: [
      { name: 'AddIcon', desc: '添加' },
      { name: 'AddCircleIcon', desc: '添加圆形' },
      { name: 'AddRectangleIcon', desc: '添加矩形' },
      { name: 'RemoveIcon', desc: '移除' },
      { name: 'DeleteIcon', desc: '删除' },
      { name: 'Edit1Icon', desc: '编辑1' },
      { name: 'EditIcon', desc: '编辑' },
      { name: 'SaveIcon', desc: '保存' },
      { name: 'CopyIcon', desc: '复制' },
      { name: 'CutIcon', desc: '剪切' },
      { name: 'PasteIcon', desc: '粘贴' },
      { name: 'UndoIcon', desc: '撤销' },
      { name: 'RedoIcon', desc: '重做' },
      { name: 'RefreshIcon', desc: '刷新' },
      { name: 'ReloadIcon', desc: '重新加载' },
      { name: 'SubmitIcon', desc: '提交' },
      { name: 'CancelIcon', desc: '取消' },
      { name: 'ResetIcon', desc: '重置' },
      { name: 'ClearIcon', desc: '清空' },
      { name: 'CloseIcon', desc: '关闭' },
      { name: 'CheckIcon', desc: '确认' },
      { name: 'DownloadIcon', desc: '下载' },
      { name: 'UploadIcon', desc: '上传' },
    ]
  },
  {
    key: 'ui',
    name: '通用UI',
    icon: '🎨',
    icons: [
      { name: 'HomeIcon', desc: '首页' },
      { name: 'UserIcon', desc: '用户' },
      { name: 'UserCircleIcon', desc: '用户圆形' },
      { name: 'UsersIcon', desc: '用户组' },
      { name: 'SettingIcon', desc: '设置' },
      { name: 'SearchIcon', desc: '搜索' },
      { name: 'FilterIcon', desc: '筛选' },
      { name: 'SortIcon', desc: '排序' },
      { name: 'MoreIcon', desc: '更多' },
      { name: 'MenuIcon', desc: '菜单' },
      { name: 'MenuFoldIcon', desc: '折叠菜单' },
      { name: 'MenuUnfoldIcon', desc: '展开菜单' },
      { name: 'ViewListIcon', desc: '列表视图' },
      { name: 'ViewModuleIcon', desc: '模块视图' },
      { name: 'GridViewIcon', desc: '网格视图' },
      { name: 'CardViewIcon', desc: '卡片视图' },
      { name: 'ThumbUpIcon', desc: '赞' },
      { name: 'ThumbDownIcon', desc: '踩' },
      { name: 'StarIcon', desc: '星星' },
      { name: 'HeartIcon', desc: '心形' },
      { name: 'EyeIcon', desc: '查看' },
      { name: 'EyeOffIcon', desc: '隐藏' },
      { name: 'LockOnIcon', desc: '锁定' },
      { name: 'LockOffIcon', desc: '解锁' },
    ]
  },
  {
    key: 'direction',
    name: '方向',
    icon: '🧭',
    icons: [
      { name: 'ArrowUpIcon', desc: '向上箭头' },
      { name: 'ArrowDownIcon', desc: '向下箭头' },
      { name: 'ArrowLeftIcon', desc: '向左箭头' },
      { name: 'ArrowRightIcon', desc: '向右箭头' },
      { name: 'ChevronUpIcon', desc: '向上' },
      { name: 'ChevronDownIcon', desc: '向下' },
      { name: 'ChevronLeftIcon', desc: '向左' },
      { name: 'ChevronRightIcon', desc: '向右' },
      { name: 'ExpandIcon', desc: '展开' },
      { name: 'FoldIcon', desc: '折叠' },
      { name: 'FullscreenIcon', desc: '全屏' },
      { name: 'FullscreenExitIcon', desc: '退出全屏' },
    ]
  },
  {
    key: 'communication',
    name: '通信媒体',
    icon: '📱',
    icons: [
      { name: 'CallIcon', desc: '电话' },
      { name: 'Call1Icon', desc: '电话1' },
      { name: 'CallAddIcon', desc: '添加电话' },
      { name: 'CallForwardIcon', desc: '电话转接' },
      { name: 'CallIncomingIcon', desc: '来电' },
      { name: 'CallOutgoingIcon', desc: '拨出' },
      { name: 'ChatIcon', desc: '聊天' },
      { name: 'Chat1Icon', desc: '聊天1' },
      { name: 'ChatBubbleIcon', desc: '聊天气泡' },
      { name: 'MessageIcon', desc: '消息' },
      { name: 'Message1Icon', desc: '消息1' },
      { name: 'MailIcon', desc: '邮件' },
      { name: 'Mail1Icon', desc: '邮件1' },
      { name: 'MailOpenIcon', desc: '打开邮件' },
      { name: 'NotificationIcon', desc: '通知' },
      { name: 'NotificationAddIcon', desc: '添加通知' },
      { name: 'VolumeIcon', desc: '音量' },
      { name: 'VolumeUpIcon', desc: '调高音量' },
      { name: 'VolumeDownIcon', desc: '调低音量' },
      { name: 'VolumeMuteIcon', desc: '静音' },
      { name: 'PlayIcon', desc: '播放' },
      { name: 'PauseIcon', desc: '暂停' },
      { name: 'StopIcon', desc: '停止' },
      { name: 'MicrophoneIcon', desc: '麦克风' },
      { name: 'VideocamIcon', desc: '摄像头' },
    ]
  },
  {
    key: 'file',
    name: '文件',
    icon: '📁',
    icons: [
      { name: 'FileIcon', desc: '文件' },
      { name: 'FolderIcon', desc: '文件夹' },
      { name: 'FolderOpenIcon', desc: '打开文件夹' },
      { name: 'FileAddIcon', desc: '新建文件' },
      { name: 'FileCopyIcon', desc: '复制文件' },
      { name: 'FileDeleteIcon', desc: '删除文件' },
      { name: 'FileDownloadIcon', desc: '下载文件' },
      { name: 'FileUploadIcon', desc: '上传文件' },
      { name: 'FilePdfIcon', desc: 'PDF文件' },
      { name: 'FileExcelIcon', desc: 'Excel文件' },
      { name: 'FileWordIcon', desc: 'Word文件' },
      { name: 'FilePowerpointIcon', desc: 'PPT文件' },
      { name: 'FileImageIcon', desc: '图片文件' },
      { name: 'FileVideoIcon', desc: '视频文件' },
      { name: 'FileAudioIcon', desc: '音频文件' },
      { name: 'FileZipIcon', desc: '压缩文件' },
    ]
  },
  {
    key: 'user',
    name: '用户',
    icon: '👤',
    icons: [
      { name: 'UserIcon', desc: '用户' },
      { name: 'UserAddIcon', desc: '添加用户' },
      { name: 'UserClearIcon', desc: '清除用户' },
      { name: 'UserDeleteIcon', desc: '删除用户' },
      { name: 'UserEditIcon', desc: '编辑用户' },
      { name: 'UserListIcon', desc: '用户列表' },
      { name: 'UserGroupIcon', desc: '用户组' },
      { name: 'UserAvatarIcon', desc: '用户头像' },
      { name: 'UserSettingIcon', desc: '用户设置' },
      { name: 'UserSecurityIcon', desc: '用户安全' },
      { name: 'TeamIcon', desc: '团队' },
      { name: 'ContactsIcon', desc: '联系人' },
    ]
  },
  {
    key: 'communication',
    name: '通讯',
    icon: '💬',
    icons: [
      { name: 'MessageIcon', desc: '消息' },
      { name: 'ChatIcon', desc: '聊天' },
      { name: 'MailIcon', desc: '邮件' },
      { name: 'PhoneIcon', desc: '电话' },
      { name: 'CallIcon', desc: '通话' },
      { name: 'VideoIcon', desc: '视频' },
      { name: 'VideoCallIcon', desc: '视频通话' },
      { name: 'VoiceIcon', desc: '语音' },
      { name: 'NotificationIcon', desc: '通知' },
      { name: 'BellIcon', desc: '铃铛' },
      { name: 'SpeakerIcon', desc: '扬声器' },
      { name: 'MicrophoneIcon', desc: '麦克风' },
    ]
  },
  {
    key: 'media',
    name: '媒体',
    icon: '🎵',
    icons: [
      { name: 'PlayIcon', desc: '播放' },
      { name: 'PauseIcon', desc: '暂停' },
      { name: 'StopIcon', desc: '停止' },
      { name: 'MusicIcon', desc: '音乐' },
      { name: 'VolumeUpIcon', desc: '音量增大' },
      { name: 'VolumeDownIcon', desc: '音量减小' },
      { name: 'VolumeMuteIcon', desc: '静音' },
      { name: 'ImageIcon', desc: '图片' },
      { name: 'CameraIcon', desc: '相机' },
      { name: 'PhotoIcon', desc: '照片' },
      { name: 'GalleryIcon', desc: '图库' },
      { name: 'MovieIcon', desc: '电影' },
    ]
  },
  {
    key: 'business',
    name: '商务',
    icon: '💼',
    icons: [
      { name: 'ShopIcon', desc: '商店' },
      { name: 'ShoppingIcon', desc: '购物' },
      { name: 'ShoppingCartIcon', desc: '购物车' },
      { name: 'OrderIcon', desc: '订单' },
      { name: 'PackageIcon', desc: '包裹' },
      { name: 'DeliveryIcon', desc: '配送' },
      { name: 'MoneyIcon', desc: '金钱' },
      { name: 'PaymentIcon', desc: '支付' },
      { name: 'CreditCardIcon', desc: '信用卡' },
      { name: 'BankIcon', desc: '银行' },
      { name: 'WalletIcon', desc: '钱包' },
      { name: 'ReceiptIcon', desc: '收据' },
      { name: 'InvoiceIcon', desc: '发票' },
      { name: 'CouponIcon', desc: '优惠券' },
    ]
  },
  {
    key: 'status',
    name: '状态',
    icon: '📊',
    icons: [
      { name: 'CheckIcon', desc: '成功' },
      { name: 'CloseIcon', desc: '关闭' },
      { name: 'ErrorIcon', desc: '错误' },
      { name: 'WarningIcon', desc: '警告' },
      { name: 'InfoIcon', desc: '信息' },
      { name: 'HelpIcon', desc: '帮助' },
      { name: 'QuestionIcon', desc: '问号' },
      { name: 'LoadingIcon', desc: '加载中' },
      { name: 'SuccessIcon', desc: '成功状态' },
      { name: 'DangerIcon', desc: '危险状态' },
      { name: 'PendingIcon', desc: '等待状态' },
      { name: 'ProcessingIcon', desc: '处理中' },
    ]
  },
  {
    key: 'security',
    name: '安全',
    icon: '🔒',
    icons: [
      { name: 'LockIcon', desc: '锁定' },
      { name: 'UnlockIcon', desc: '解锁' },
      { name: 'LockOnIcon', desc: '加锁' },
      { name: 'LockOffIcon', desc: '解锁' },
      { name: 'SecurityIcon', desc: '安全' },
      { name: 'PasswordIcon', desc: '密码' },
      { name: 'KeyIcon', desc: '钥匙' },
      { name: 'ShieldIcon', desc: '盾牌' },
      { name: 'VerifyIcon', desc: '验证' },
      { name: 'FingerprintIcon', desc: '指纹' },
      { name: 'ScanIcon', desc: '扫描' },
      { name: 'SafeIcon', desc: '保险箱' },
    ]
  },
  {
    key: 'location',
    name: '位置',
    icon: '📍',
    icons: [
      { name: 'LocationIcon', desc: '位置' },
      { name: 'MapIcon', desc: '地图' },
      { name: 'NavigationIcon', desc: '导航' },
      { name: 'CompassIcon', desc: '指南针' },
      { name: 'GpsIcon', desc: 'GPS' },
      { name: 'RouteIcon', desc: '路线' },
      { name: 'PinIcon', desc: '定位' },
      { name: 'PlaceIcon', desc: '地点' },
      { name: 'WorldIcon', desc: '世界' },
      { name: 'GlobeIcon', desc: '地球' },
      { name: 'DistanceIcon', desc: '距离' },
      { name: 'DirectionIcon', desc: '方向' },
    ]
  },
  {
    key: 'time',
    name: '时间',
    icon: '⏰',
    icons: [
      { name: 'TimeIcon', desc: '时间' },
      { name: 'ClockIcon', desc: '时钟' },
      { name: 'CalendarIcon', desc: '日历' },
      { name: 'DateIcon', desc: '日期' },
      { name: 'ScheduleIcon', desc: '计划' },
      { name: 'TimerIcon', desc: '计时器' },
      { name: 'AlarmIcon', desc: '闹钟' },
      { name: 'StopwatchIcon', desc: '秒表' },
      { name: 'HistoryIcon', desc: '历史' },
      { name: 'RecentIcon', desc: '最近' },
      { name: 'DurationIcon', desc: '持续时间' },
      { name: 'DeadlineIcon', desc: '截止时间' },
    ]
  },
  {
    key: 'other',
    name: '其他',
    icon: '🔗',
    icons: [
      { name: 'LinkIcon', desc: '链接' },
      { name: 'ShareIcon', desc: '分享' },
      { name: 'BookmarkIcon', desc: '书签' },
      { name: 'TagIcon', desc: '标签' },
      { name: 'StarIcon', desc: '星标' },
      { name: 'HeartIcon', desc: '喜欢' },
      { name: 'ThumbsUpIcon', desc: '点赞' },
      { name: 'ThumbsDownIcon', desc: '点踩' },
      { name: 'EyeIcon', desc: '查看' },
      { name: 'EyeOffIcon', desc: '隐藏' },
      { name: 'VisibilityIcon', desc: '可见性' },
      { name: 'PrintIcon', desc: '打印' },
      { name: 'QrcodeIcon', desc: '二维码' },
      { name: 'BarcodeIcon', desc: '条形码' },
      { name: 'SearchIcon', desc: '搜索' },
      { name: 'FilterIcon', desc: '筛选' },
      { name: 'SortIcon', desc: '排序' },
      { name: 'MenuIcon', desc: '菜单' },
      { name: 'MoreIcon', desc: '更多' },
      { name: 'GridIcon', desc: '网格' },
      { name: 'ListIcon', desc: '列表' },
      { name: 'LayersIcon', desc: '图层' },
    ]
  }
]

// 计算过滤后的图标
const filteredIcons = computed(() => {
  const allIcons = categories.flatMap(cat => 
    cat.icons.map(icon => ({ ...icon, category: cat.key }))
  )
  
  if (!searchText.value && !selectedCategory.value) {
    return allIcons
  }
  
  return allIcons.filter(icon => {
    const matchesSearch = !searchText.value || 
      icon.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
      icon.desc.includes(searchText.value)
    
    const matchesCategory = !selectedCategory.value || 
      icon.category === selectedCategory.value
    
    return matchesSearch && matchesCategory
  })
})

// 计算显示的分类
const displayCategories = computed(() => {
  if (selectedCategory.value) {
    const category = categories.find(cat => cat.key === selectedCategory.value)
    if (category) {
      const filteredIcons = category.icons.filter(icon => 
        !searchText.value || 
        icon.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
        icon.desc.includes(searchText.value)
      )
      return [{ ...category, icons: filteredIcons }]
    }
    return []
  }
  
  if (!searchText.value) {
    return categories
  }
  
  return categories.map(category => ({
    ...category,
    icons: category.icons.filter(icon => 
      icon.name.toLowerCase().includes(searchText.value.toLowerCase()) ||
      icon.desc.includes(searchText.value)
    )
  })).filter(category => category.icons.length > 0)
})

// 复制图标代码
const copyIconCode = (icon: any) => {
  const code = `<${icon.name} />`
  navigator.clipboard.writeText(code).then(() => {
    MessagePlugin.success(`已复制: ${code}`)
  }).catch(() => {
    MessagePlugin.error('复制失败')
  })
}
</script>

<style scoped>
.icon-gallery-container {
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
  background: #f8fafc;
  min-height: 100vh;
}

.gallery-header {
  text-align: center;
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
}

.gallery-header h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
}

.gallery-header p {
  margin: 0;
  opacity: 0.9;
  font-size: 16px;
}

.search-section {
  background: white;
  padding: 24px;
  border-radius: 12px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-controls {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-input {
  flex: 1;
  min-width: 300px;
}

.category-select {
  width: 200px;
}

.search-stats {
  text-align: center;
  color: #666;
  font-size: 14px;
}

.stats-number {
  color: #0052d9;
  font-weight: 600;
}

.categories-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.category-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f5f9;
}

.category-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.category-count {
  background: #f1f5f9;
  color: #6b7280;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.icon-item {
  background: #fafbfc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.icon-item:hover {
  background: #f0f9ff;
  border-color: #0052d9;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 82, 217, 0.15);
}

.icon-item:hover::after {
  content: '点击复制';
  position: absolute;
  top: 4px;
  right: 6px;
  background: #0052d9;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  z-index: 1;
}

.icon-display {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  color: #374151;
}

.icon-info {
  text-align: center;
}

.icon-name {
  font-weight: 500;
  color: #1f2937;
  font-size: 12px;
  margin-bottom: 2px;
  word-break: break-all;
  font-family: 'Monaco', 'Menlo', monospace;
}

.icon-desc {
  font-size: 11px;
  color: #6b7280;
}

.usage-guide {
  background: white;
  border-radius: 12px;
  padding: 32px;
  margin-top: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.usage-guide h2 {
  margin: 0 0 24px 0;
  color: #1f2937;
  font-size: 24px;
  font-weight: 600;
}

.guide-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.guide-section h3 {
  margin: 0 0 12px 0;
  color: #374151;
  font-size: 16px;
  font-weight: 600;
}

.guide-section pre {
  background: #f8fafc;
  border-radius: 6px;
  padding: 16px;
  margin: 0;
  overflow-x: auto;
  border-left: 3px solid #0052d9;
}

.guide-section code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}

/* 现代化样式增强 */
.search-input {
  :deep(.t-input) {
    border-radius: var(--modern-radius-md);
    transition: var(--modern-transition-normal);
    
    &:hover {
      box-shadow: var(--modern-shadow-sm);
    }
    
    &.t-is-focused {
      box-shadow: var(--modern-shadow-md);
      border-color: rgba(99, 102, 241, 0.5);
    }
  }
}

.category-select {
  :deep(.t-input) {
    border-radius: var(--modern-radius-md);
    transition: var(--modern-transition-normal);
    
    &:hover {
      box-shadow: var(--modern-shadow-sm);
    }
    
    &.t-is-focused {
      box-shadow: var(--modern-shadow-md);
      border-color: rgba(99, 102, 241, 0.5);
    }
  }
}

.search-stats {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--modern-text-secondary);
  
  .stats-number {
    font-weight: 700;
    font-size: 1rem;
  }
}

.gallery-header {
  text-align: center;
  margin-bottom: 2rem;
  
  h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
  }
  
  p {
    font-size: 1rem;
    color: var(--modern-text-muted);
    margin: 0;
  }
}

.category-section {
  margin-bottom: 2rem;
  
  &:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 768px) {
  .modern-page {
    padding: 1rem;
  }
  
  .search-controls {
    flex-direction: column;
    gap: 1rem;
  }
  
  .category-select {
    width: 100%;
  }
  
  .icons-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
  }
  
  .icon-item {
    padding: 0.75rem;
  }
  
  .category-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .guide-content {
    grid-template-columns: 1fr;
  }
  
  .gallery-header h1 {
    font-size: 2rem;
  }
}
</style> 